<#escape x as x?html>
<div class="box box-solid box-fusion no-shadow no-border">
    <div class="box-header" style="padding:0px;">
        <div class="box-tools">
            <form class="hide" id="listForm" method="post">
                <input id="pageIndex" name="pageIndex" value="${page.pageIndex!''}">
                <input id="pageSize" name="pageSize" value="${page.pageSize!''}">
                <input id="pagesNum" name="pagesNum" value="${page.pagesNum!''}">
            </form>
            <@y.htmlFuzzySearchListForm insert="false">
                <input id="appId" name="appId" value="${appId!}">
            </@y.htmlFuzzySearchListForm>
        </div>
    </div><!-- /.box-header -->
    <div class="box-body table-responsive no-padding">
        <table class="table table-hover"
               data-form-name="评论">
            <thead>
            <input type="text" class="hide"
                   id="appId" value="${appId!}">
            <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;background-color: white;"
                colspan="2">
                <img src="${assetsPath}/img/demo/app-info-prefix.png"
                     style="margin-top: -10px;border-radius: 0;margin-top: -5px;" alt="User Image">&nbsp;应用评价</img><span
                    style="font-size: 14px;font-style: italic;color: #adabab;">( ${(page.totalNum)!0}条)</span>
            </th>
            <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;background-color: white;"></th>
            <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;background-color: white;"></th>
            <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;background-color: white;padding-right: 0px;">
            <#if isLogin>
                <a id="commnentBtn" class="btn btn-block btn-primary btn-sm pull-right"
                   style="width: 130px;height: 35px;" data-html="true" data-toggle="popover" data-placement="bottom"
                   data-trigger="click">评论</a>
            </#if>
            </th>
            </thead>
            <tbody>
                <#if (page.entities??)&&(page.entities?size>0)>
                    <#list page.entities as record>
                    <tr record-id='${record.id}' style="background-color: white;">
                        <td style="border-bottom: 1px solid #dadada; padding: 10px; width: 40px;padding-right: 5px;"
                            class="popup-close"><span>${(page.pageIndex-1)*page.pageSize+record_index+1}.</span></td>
                        <td style="border-bottom: 1px solid #dadada; padding: 10px;padding-left: 0px;"
                            class="popup-close"> ${record.content!''}</td>
                        <td style="border-bottom: 1px solid #dadada; padding: 10px;width: 80px;"
                            class="popup-close">
                            <input class="rating-input-xxs" value="${record.score!''}" type="number">
                        </td>
                        <td style="border-bottom: 1px solid #dadada; padding: 10px; width:  15%;text-align: center;" class="popup-close"><#if record.anonymous><span style="font-size: 12px;max-width: 15%;">*匿名用户*</span><#else><span
                                style="color: #337AC4;font-size: 12px;max-width: 15%;">${record.userName}</span></#if>
                        </td>
                        <td style="border-bottom: 1px solid #dadada; padding: 10px; width:  12%" class="popup-close"><span
                                style="font-size: 14px;font-style: italic;color: #adabab;"> &nbsp;&nbsp;${record.updateTime}</span>
                        </td>
                    </tr>
                    </#list>
                </#if>
            </tbody>
        </table>
    </div><!-- /.box-body -->
    <div class="box-footer no-border clearfix" style="background-color: white;padding-right: 0px;">
        <@y.htmlPaginationOverview/>
    </div>
</div><!-- /.box -->
    <@y.htmlModal type="save"/>
<style>

    .pagination > li > a {
        background: greenyellow!important;
        color: blue!important;
    }
    .pagination.pagination-flat > li > a {
        border-radius: 0 !important;
    }

    .paginate-button {
        background-color: white !important;
        font-size: 14px !important;
    }
    .paginate-current {
        background-color: #3AAFFE !important;
        font-size: 14px !important;
        color: white !important;
    }


</style>
<script>
    $("#fuzzyFieldStr").parent().remove();
    $(".pagination-overview").remove();
    $(".pagination-list").addClass("pull-right");
    context.call([
        "list",
        "jQuery",
        "starRating"
    ], function (list, jQuery, starRating) {
        $('.rating-input-xxs').rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'xxs',
            displayOnly: true
        });

        list.initSearchList("/app/comment", {
            urlList: "list/" + $("#appId").val(),
            targetSelector: "#commentList",
            searchFormSelector: "#listForm",
        });

        var content = ['<div style="overflow-y: hidden; overflow-x: hidden; height: 250px;width: 700px;margin-left: 15px;margin-top: 20px;">',
            '                        <div class="form-group row">',
            '                                <label for="description"',
            '                                       class="col-sm-2 control-label" style="padding-top: 10px;margin-left:20px;">满意度:</label>',
            '                                <div class="col-sm-10" style="margin-left: -25px;">',
            '                               <input class="rating-input-xs" name="score" id="score" value="5" type="number"></div>',
            '                        </div>',
            '                        <div class="form-group row" style="margin-bottom: 0px;">',
            '                            <label for="description"',
            '                                   class="col-sm-2 control-label" style="margin-left:20px;">评价:</label>',
            '                            <div class="col-sm-10" style="margin-left: -25px;">',
            '                            <textarea type="text" class="form-control"',
            '                                      name="content" id="content"',
            '                                      placeholder="填写应用评价"',
            '                                      data-error="<@s.message "validator.error.require"/>" required',
            '                            ></textarea>',
            '                                <div class="help-block with-errors"></div>',
            '                            </div>',
            '                        </div>',
            '                       <div class="form-group row" style="margin-bottom: 0px;">',
            '                           <div class="col-sm-2" />',
            '                            <div class="col-sm-10" style="padding-left: 10px;">',
             '                              <label class="checkbox" style="margin-left: 15px;">',
             '                                   <input id="anonymous" type="checkbox" name="anonymous" style="outline:none;"> 匿名',
             '                              </label>',
            '                            </div>',
            '                        </div>',
            '                        <button type="button" id="commentSubmitBtn" class="btn btn-primary pull-right" style="outline: none;width: 90px;margin-right: 40px;">提交</button>',
            '                    </div>'].join("");

        $("#commnentBtn").popover({
            content: content
        }).on("click", function () {
            $('.rating-input-xs').rating({
                min: 0,
                max: 5,
                step: 0.5,
                starCaptions: function (val) {
                    return val + '分';
                },
                showClear: false,
                size: 'xs'
            });
            $('#commentSubmitBtn').click(function () {
                $.ajax({
                    url: "/app/comment/submit?appId=" + $("#appId").val() + "&content=" + $("#content").val() + "&score=" + $("#score").val() + "&anonymous=" + $("#anonymous").is(":checked"),
                    success: function () {
                        location.href = "/app/detail?id=" + $("#appId").val();
                    }
                })
            });
        });

        $('.rating-container').css("width", "80px").css("float", "left");

    })
</script>
</#escape>